<template>
  <div class="sermubiandiyi">
    <div class="servemutitle">
      <div class="servemubianxie"></div>
      <font>编辑服务项目</font>
    </div>
    <div class="dierservemu">
      <hr color="#F7FAFD" />
    </div>
    <div class="disanservemu">
      <font>服务项目信息</font>
    </div>
    <div class="disiservemu">
      <el-input v-model="list.project_id" v-if="false"></el-input>
      <table border="0" width="70%" height="300px">
        <tr>
          <td width="60px"><font>项目名称*</font></td>
          <td width="10px"></td>
          <td width="210px">
            <el-input
              v-model="list.project_name"
              placeholder="请输入内容"
            ></el-input>
          </td>
          <td width="10px"></td>
          <td width="60px"><font>服务次数*</font></td>
          <td width="10px"></td>
          <td width="210px">
            <el-input
              v-model="list.project_count"
              placeholder="请输入内容"
            ></el-input>
          </td>
          <td width="10px"></td>
          <td>
            <el-checkbox>不限次数</el-checkbox>
          </td>
        </tr>

        <tr>
          <td width="60px"><font>项目类型*</font></td>
          <td width="10px"></td>
          <td>
            <el-select v-model="list.project_type" placeholder="请选择">
              <el-option
                v-for="item in list1"
                :label="item.label"
                :key="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </td>
          <td width="10px"></td>
          <td width="60px"><font>项目原价*</font></td>
          <td width="10px"></td>
          <td>
            <el-input
              v-model="list.project_price"
              placeholder="请输入内容"
            ></el-input>
          </td>
          <td width="10px"></td>
          <td>
            <font>元</font>
          </td>
        </tr>
        <tr height="10px">
          <td colspan="9"></td>
        </tr>
        <tr>
          <td width="60px" valign="top"><font>服务介绍</font></td>
          <td width="10px"></td>
          <td colspan="5" valign="top">
            <el-col style="width: 500px">
              <el-input
                v-model="list.project_info"
                type="textarea"
                placeholder="请输入内容"
                :rows="5"
              ></el-input>
            </el-col>
          </td>
          <td width="10px"></td>
          <td></td>
        </tr>
      </table>
    </div>
    <div class="diwuservemu">
      <hr color="#F7FAFD" />
    </div>
    <div class="diliuservemu">
        <router-link to="/datas05">
      <el-button type="primary" @click="baocun()">保存</el-button>
      <el-button plain>返回</el-button>
        </router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080/";
export default {
  data() {
    return {
      list: [],
      list1: [
        {
          value: 1,
          label: "付费项目",
        },
        {
          value: 2,
          label: "免费项目",
        },
      ],
      value1: "", //项目
    };
  },
  methods: {
    quertList() {
      axios({
        url: "data/getServeObjById",
        method: "GET",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        this.list = res.data; //把值传到list里面
        console.log(res.data);
      });
    },
    baocun(){
        axios({
        url: "data/updateServeObj",
        method: "POST",
        params: {
          project: this.list,
        },
      }).then((res) => {
          this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
        });
      });
    }
  },
  created() {
    this.quertList(),
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#F2F7FB");
  },
};
</script>

<style>
.diliuservemu {
  width: 96%;
  /* height: 100px; */
  margin-top: 2%;
  margin-left: 2%;
  /* background-color: red; */
}
.diwuservemu {
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: -2%;
  /* background-color: red; */
}
.disiservemu font {
  color: #a699a6;
}
.disiservemu {
  width: 96%;
  /* height: 100px; */
  margin-left: 2%;
  margin-top: 8%;
  /* background-color: red; */
  font-size: 13px;
}
.disanservemu {
  float: left;
  width: 98%;
  height: 20px;
  margin-left: 2%;
  font-size: 16px;
  margin-top: 2%;
}
.dierservemu {
  float: left;
  height: 10px;
  width: 96%;
  margin-left: 2%;
  margin-top: 1.5%;
  /* background-color: blue; */
}
.servemubianxie {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 5px;
  margin-left: 2%;
  display: inline-block;
  margin-right: 10px;
}
.servemutitle {
  width: 100%;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  /* background: rgb(255, 214, 214); */
}
.sermubiandiyi {
  width: 1150px;
  height: 520px;
  background: white;
  margin: 20px auto;
}
</style>